<template>
	<view class="MoreHot">
		<uv-overlay :show="updateType">
			<view class="warp">
				<view class="rect" @tap.stop>
					<view class="hot_update_zhe" v-if="updateType">
						<view class="hot_update_box">
							<image src="@/static/home/hot_updatebj.png" mode="widthFix">
							</image>
							<view class="hot_update_box_item">
								<view class="hot_update_box_item_">
									<p class="dingwei_box_text" v-for="(item,index) in text" :key="index">
										{{index+1}}.{{item}}
									</p>
								</view>
								<progress v-if="!isxiazai" style="margin-bottom: 20rpx;" :percent="dlbtn"
									activeColor='#FA625D' stroke-width="3" />

								<view class="gengxinan" v-if="isxiazai" @click="download()">
									立即更新
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>
		</uv-overlay>
	</view>
</template>

<script>
	import {
		acommsion_getappversion
	} from '@/api/home.js'
	export default {
		name: "MoreHot",
		data() {
			return {
				show: true,
				equipment: '',
				updateType: false,
				isxiazai: true,
				dlbtn: 0,
				text: []
			};
		},
		created() {
			console.log('热更加载');
			if (process.env.UNI_PLATFORM === 'h5') {
				// 在H5环境中打开
				console.log('在H5环境中打开');
				this.equipment = 'H5'
			} else if (process.env.UNI_PLATFORM === 'app-plus') {
				// 在App环境中打开
				console.log('在App环境中打开', '00000000000000000000000000000');
				this.equipment = 'App';
				this.get_hot_url();
			}
		},
		methods: {
			//获取版本
			async get_hot_url() {
				var now_v = '';
				var hot_v = '';
				let _this = this;
				// 发起请求获取 hot_v
				let data = await acommsion_getappversion();
				console.log(data);
				hot_v = data.version;
				uni.getSystemInfo({
					success(e) {
						let a = e.appWgtVersion.split('.');
						a.forEach(item => {
							now_v = now_v += item;
						});
						if (hot_v !== now_v) {
							setTimeout(() => {
								_this.updateType = true;
							}, 500);

							_this.hot_url = data.urla;
							_this.text = data.notice.split(',');
						}
					}
				});
			},


			// 下载
			download() {
				if (this.isxiazai) {
					this.isxiazai = false;
					this.dlbtn = 0;
					let _this = this;
					if (this.hot_url !== '') {
						var downToak = plus.downloader.createDownload(this.hot_url, { //拿到下载任务的对象
							filename: '_doc/update/'
						}, function(d, status) {
							console.log(d, status);
							plus.nativeUI.closeWaiting();
							if (status == 200) { //在回调中根据状态 进行操作
								plus.runtime.install(plus.io.convertLocalFileSystemURL(d.filename), {}, {},
									function(
										error) {
										uni.showToast({
											title: '安装失败',
											mask: false,
											duration: 1500
										});
									})
							} else {
								app.alert("配置出错,请检查网络链接！");
							}
						});
						downToak.start(); // 开启下载的任务
						var prg = 0;
						downToak.addEventListener("statechanged", function(task, status) { //给下载任务设置一个监听 并根据状态  做操作
							console.log(task, status);
							switch (task.state) {
								case 1:
									break;
								case 2:
									break;
								case 3:
									prg = parseInt(parseFloat(task.downloadedSize) / parseFloat(task.totalSize) *
										100);
									_this.dlbtn = prg
									break;
								case 4:
									_this.isxiazai = true;
									break;
							}
						});
					}
				} else {
					return
				}

			}
		}
	}
</script>

<style lang="scss">
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		width: 450rpx;
		height: 600rpx;
		background-color: #fff;

		.hot_update_box {
			position: absolute;
			width: 472rpx;
			height: 600rpx;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			background-color: #fff;
			border-bottom-left-radius: 10rpx;
			border-bottom-right-radius: 10rpx;

			image {
				width: calc(100% + 0.1%);
				margin-top: -60rpx;
				height: 200rpx;
			}

			.hot_update_box_item {
				width: 100%;
				height: 100%;
				padding: 0 20rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.gengxinan {
					width: 60%;
					height: 60rpx;
					background-color: #FA625D;
					margin: 20rpx auto;
					font-size: 24rpx;
					text-align: center;
					color: #fff;
					line-height: 60rpx;
					border-radius: 10rpx;
				}

				.hot_update_box_item_ {
					width: 100%;
					height: 300rpx;
					overflow-y: auto;
					// text-align: center;

					.dingwei_box_text {
						width: 80%;
						margin: 0 auto;
						padding: 10rpx;
						line-height: 40rpx;
						font-size: 26rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}
		}
	}
</style>